<template>
	<div>
		<vFrontPage title subTitle="自助服务系统">
			<div slot="customContent">
				<!-- 首页背景图 -->
				<div class="main-bg"></div>

				<!-- start:自定义页面内容 -->
				<!-- <div v-if="sceneid=='sstbg'" style="height:300px;background-color:#918;"></div> -->
				<!-- <div v-if="sceneid=='sstbg'" style="width:100%;height:768px;"></div> -->
				<div style="font-size:16px;color:black;line-height:1.2;">
					<div style="font-size:16px;color:black;line-height:1.2"
						v-html=this.$store.state.terminfo.seceninfo.homeTips>
					</div>
					<el-row :gutter="30" style="padding:0 40px;">
						<el-col span="8" v-for="(item, index) in operationalMatters" :key="index">
							<!-- <el-card @click.native="getInit(item)">
                <div
                  :style="{backgroundImage: 'url('+ item.funcUrl +')'}"
                  :class="istolong(item.funcTypeName) ? 'long-item-icon' : 'item-icon'"
                ></div>
                <h1 class="item-name">{{item.funcTypeName}}</h1>
              </el-card> -->
							<div @click="getInit(item)">
								<div :style="{backgroundImage: 'url('+ item.funcUrl +')'}" class="custom-icon"></div>
							</div>
						</el-col>
					</el-row>
				</div>
				<!-- end:自定义页面内容 -->
			</div>
		</vFrontPage>
	</div>
</template>

<script>
	import {
		checkversion
	} from "@api/data";
	import {
		CK80Printer
	} from '@api/tools/Hardware.js'
	export default {
		name: "Home",
		props: [],
		components: {},
		data() {
			return {
				operationalMatters: this.$store.state.terminfo.funcinfo,
				sceneid: this.$store.state.terminfo.seceninfo.sceneid,
				cmiid: this.$store.state.terminfo.orginfo.cmiid,
				printer: new CK80Printer(),
			};
		},
		methods: {
			istolong(data) {
				if (data.length > 10) {
					return true;
				} else {
					return false;
				}
			},
			clear() {
				//读业务初始阶段，清空vuex除终端信息外 所有存储，防止出错。
				this.$store.dispatch("user/updateuserinfo", "");
				this.$store.dispatch("user/updatemiinfo", "");
				this.$store.dispatch("appointment/updateAppointmentInfo", "");
				this.$store.dispatch("payrecord/updatepayinfo", "");
				this.$store.dispatch("recipel/updateinvoiceNo", "");
				this.$store.dispatch("recipel/updateRecordsInfo", "");
				this.$store.dispatch("recipel/updateBillInfo", "");
				this.$store.dispatch("route/updatePreStageEnd", "");
				this.$store.dispatch('user/updatemisYbPay', false); //医保支付
			},
			async getInit(item) {
				var status = await this.printer.GetStatus();
				console.log("打印机状态=" + status);
				var val = item.funcCode;
				if (status != '0') {
					if (status == '2') {
						this.$confirm('打印机纸张即将用完', '提示', {
								cancelButtonText: '取消操作',
								confirmButtonText: '继续操作'
							})
							.then(_ => {
								this.choicefunction(item);
							}).catch(_ => {
								this.$router.push({
									name: "home"
								});
							});

					} else {
						this.$alert(status);
					}

				} else {
					this.choicefunction(item);
				}
			},
			choicefunction(item) {
				console.log("item=" + item);
				var val = item.funcCode;
				let logintype = item.loginConfs;
				this.clear();
				/*
				 *办理就诊卡
				 */
				if (val == "zzfk") {
					// 跳到读身份证界面
					this.$router.push({
						name: "archives",
						query: {
							pageTitle: "请刷身份证",
							id: val
						},
					});
				} else if (val == "other") {
					//  this.$router.push({ name: "printreport" });
					this.$alert("暂未开通", "提示：", {
						confirmButtonText: "确定",
						callback: (action) => {
							if (action == "confirm" || action == "cancel") {
								// this.$store.commit("alteruserinfo", "");
								this.$router.push({
									name: "home"
								});
							}
						},
					});
				} else if (val == "zycz") {
					this.$router.push({
						name: "zycz",
						query: {
							pageTitle: "请输入住院信息",
							id: val
						},
					});
				} else if (val == "qdcx") {
					this.$router.push({
						name: "qdcx",
						query: {
							pageTitle: "请输入住院信息",
							id: val
						},
					});
				} else {
					// 先跳到读卡界面
					this.$router.push({
						name: "readcard",
						query: {
							pageTitle: "选择刷卡方式",
							id: val,
							logintype: logintype
						},
					});
				}
			},
			checkverison() {
				if (this.destroyed) {
					return; // 防止页面关闭后 继续调用
				}
				var localVerNum = this.$store.state.terminfo.terminfo.signature; //启动时存在本地的版本号
				console.log("本地版本号：", localVerNum);
				let data = {};
				data.url = "/api/sst/conf/GetVerNum";
				data.payload = {};
				checkversion(data).then((res) => {
					var serVerNum = res.data;
					console.log("最新版本号：", serVerNum);
					if (serVerNum != localVerNum) { //本地版本号与获取到的最新版本号不一致的，重新加载
						this.$router.push({
							name: "homepage"
						});
					} else {
						this.timerhandle = setTimeout(() => this.checkverison(), 300000); //设置5分钟延迟,版本号一致的延迟后继续查询
					}
				});
			},

		},
		mounted() {
			console.log("clear all");
			this.clear();
			console.log("clear all-end");
			this.timerhandle = setTimeout(() => this.checkverison(), 20000);
		},
		beforeDestroy() {
			if (this.timerhandle != null) {
				clearTimeout(this.timerhandle);
				this.timerhandle = null;
			}
			this.destroyed = true;
		},
	};
</script>
<style scoped>
	.item-icon {
		margin: 10%;
		width: 80%;
		padding-bottom: 80%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.long-item-icon {
		margin: 10%;
		width: 80%;
		padding-bottom: 60%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.item-name {
		text-align: center;
		margin: 10px;
		font-size: 24px;
		font-weight: bold;
		color: #888;
	}

	.custom-icon {
		width: 308px;
		height: 382px;
		background-size: 80% 80%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}

	.funcclass {
		width: 1024px;
		height: 600px;
		margin: 20px;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}

	.el-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.el-col {
		position: relative;
		box-sizing: border-box;
		margin: 30px 0 0 0;
	}

	.el-card {
		border-radius: 16px;
		box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4) !important;
	}

	/* .main-bg{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 60px;
    top: 60px;
    z-index: 0;
  } */
</style>
